<!--回弹检测结果管控——2-->
<template>
  <!-- id="departments" -->
  <div class="department" id="pages dialogHuitan2  ">
    <!-- 左侧部门管理 -->
    <div class="structureTree" v-if="treelength">
      <div class="structureTree_title">
        <div>组织机构</div>
      </div>
      <tree :treeData="treeData" :checkData="checkData" name="engineerList" nodeKey="fCompanyid"
        @getTreeInfo="handleNodeClick" :defaultProps="defaultProps">
      </tree>
    </div>
    <!-- 右侧 -->
    <div class="department_right">
      <!-- 部门信息 -->
      <div class="department_right_name">
        <div>
          {{ name }}
        </div>
      </div>

      <!-- 顶部导航栏 -->
      <div class="mechanism_nav">
        <!-- 左侧 -->
        <div class="mechanism_nav_left"></div>
        <!-- 右侧 -->
        <div class="print">
          <div class="printTable">
            <el-button type="primary" icon="el-icon-refresh" size="small" @click="getDataList(getList)"></el-button>
            <el-button type="primary" v-if="yj_view" icon="el-icon-search" size="small" @click="getCheckList(fId)">查看
            </el-button>
          </div>
        </div>
      </div>

      <!-- 表格 -->
      <div class="text_table">
        <el-table ref="multipleTable" :data="tableData" style="width: 100%" height="100%" default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="F_CompanyId" v-loading="loading"
          element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)" :row-class-name="tableRowClassName" border stripe
          highlight-current-row @current-change="handleCurrentChange" @row-click="getRowInfo">
          <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
          <el-table-column prop="F_CompanyId" label="工程编号" width="260" style="display: flex">
            <template slot-scope="scope">
              <a href="javascript:;" :title="scope.row.F_CompanyId">{{
                scope.row.F_CompanyId
              }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="F_ShortName" label="工程名称" width="306">
            <template slot-scope="scope">
              <a href="javascript:;" :title="scope.row.F_ShortName">{{
                scope.row.F_ShortName
              }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="F_Nature" label="工程类别" width="200">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.F_Nature">{{
                  scope.row.F_Nature
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="F_Note" label="回弹设计值" width="120" align="center">
          </el-table-column>
          <el-table-column prop="cous" label="回弹任务数" width="120" align="center">
          </el-table-column>
          <el-table-column prop="iscous" label="回弹完成数" width="120" align="center">
          </el-table-column>
          <el-table-column prop="price" label="回弹完成率" width="120" align="center">
          </el-table-column>
          <el-table-column prop="fNature" label="回弹资料" width="120" align="center">
            <template slot-scope="scope">
              <el-button @click="openDialog1(scope.row)" @cell-dblclick="openDialog1" type="text" size="small"
                v-if="scope.row.isHave > 0 && scope.row.F_Note != ''">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 查看弹框 -->
    <div id="departments">
      <el-dialog title="查看" v-dialogDrag top="11.5%" width="70%" :visible.sync="dialogCheckVisible"
        v-loading="loadingCheckDialog" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)">
        <div class="dialogBody" :style="{ height: '500px' }">
          <!--@row-click="getRowInfo"  -->
          <el-table ref="multipleTable" v-loading="loading" element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)" :data="CheckList"
            style="width: 100%" height="300" stripe>
            <el-table-column type="index" width="50" align="center" label="序号">
            </el-table-column>
            <el-table-column prop="fProjectname" label="建设项目简称" width="150">
              <template slot-scope="scope">
                <div class="lineBoxhidden">
                  <a href="javascript:;" :title="scope.row.fProjectname">{{
                    scope.row.fProjectname
                  }}</a>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="fChecktype" label="检测类型" width="95">
            </el-table-column>
            <el-table-column prop="fLeadercompanyname" label="检测单位" width="105">
            </el-table-column>
            <el-table-column prop="fTestdates" label="回弹检测时间" width="95">
            </el-table-column>
            <el-table-column prop="fIstrue" label="回弹检测结果" width="95">
            </el-table-column>

            <el-table-column prop="fNote" label="检测情况概述" width="95">
              <template slot-scope="scope">
                <div class="lineBoxhidden">
                  <a href="javascript:;" :title="scope.row.fNote">{{
                    scope.row.fNote
                  }}</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="fCreateusername" label="记录人" width="80">
            </el-table-column>
            <el-table-column prop="fPhotofilelists" label="记录表" width="150">
              <template slot-scope="scope">
                <div style="display: flex; height: 100%; align-items: center">
                  <div v-for="(v, index) in scope.row.fPhotofilelists" @click="openPdfs1(v)" :key="index"
                    style="margin: 2px 3px; display: flex; align-items: center">
                    <img style="
                        max-width: 100%;
                        max-height: 100%;
                        width: 18px;
                        height: 20px;
                      " src="@/assets/img/pdf.png" />
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="fSourcefilelists" label="检测报告" width="150">
              <template slot-scope="scope">
                <div style="display: flex; height: 100%; align-items: center">
                  <div v-for="(v, index) in scope.row.fSourcefilelists" @click="openPdfs1(v)" :key="index"
                    style="margin: 2px 3px; display: flex; align-items: center">
                    <img style="
                        max-width: 100%;
                        max-height: 100%;
                        width: 18px;
                        height: 20px;
                      " src="@/assets/img/pdf.png" />
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="fNote" label="检测情况概述" width="95">
              <template slot-scope="scope">
                <el-button @click="openDialog(scope.row)" @cell-dblclick="openDialog" type="text" size="small">
                  详情
                </el-button>
              </template>
            </el-table-column>
            <template slot="empty">
              <img style="width: 285px; height: 208px" src="@/assets/img/undata.png" alt="" />
              <div class="pageFlagText">暂时没有数据哦！</div>
            </template>
          </el-table>
        </div>
      </el-dialog>
    </div>

    <!-- 检测记录列表 -->
    <div class="Control-1 mechanism_dialog">
      <el-dialog title="回弹信息" v-dialogDrag :visible.sync="dialogTableVisibled" v-loading="loadingDialog1"
        element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)">
        <div class="dialogBody common" :style="{ height: dialogHeight }">
          <!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1">记录报告信息</el-menu-item>
         
                                                                </el-menu> -->
          <!-- <div v-if="activeIndex == 1" class="dialogBody common" style="margin-top: 20px"
                                                                  :style="{ height: dialogHeight }"> -->

          <el-form :model="formData" :disabled="true" style="">
            <div style="display: flex; width: 100%">
              <el-form-item label="检测类型" :label-width="formLabelWidth">
                <el-input v-model="formData.fChecktype" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="检测单位" :label-width="formLabelWidth">
                <el-input v-model="formData.fLeadercompanyname" autocomplete="off"></el-input>
              </el-form-item>
            </div>

            <div style="display: flex; width: 100%">
              <el-form-item label="回弹检测时间" :label-width="formLabelWidth">
                <el-input v-model="formData.fTestdates" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="回弹检测结果" :label-width="formLabelWidth">
                <el-input v-model="formData.fIstrue" autocomplete="off"></el-input>
              </el-form-item>
            </div>

            <div style="display: flex; width: 100%">
              <el-form-item label="检测情况概述" :label-width="formLabelWidth">
                <el-input v-model="formData.fNote" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="记录人" :label-width="formLabelWidth">
                <el-input v-model="formData.fCreateusername" autocomplete="off"></el-input>
              </el-form-item>
            </div>

            <div style="display: flex; width: 100%">
              <el-form-item label="回弹记录表" :label-width="formLabelWidth">
                <template>
                  <div style="
                      display: flex;
                      border-bottom: 1px solid #d1d7e2;
                      height: 40px;
                      align-items: center;
                    ">
                    <div v-for="(item, index) in fPhotofilelist" :key="index" class="imgs"
                      @click="openPdf(item.url, item.fFileName)">
                      <img src="" />
                    </div>
                  </div>
                </template>
                <!-- <el-input v-model="formData.fCreateusername" autocomplete="off"></el-input> -->
              </el-form-item>
              <el-form-item label="回弹检测报告" :label-width="formLabelWidth">
                <!--  -->
                <template>
                  <div style="
                      display: flex;
                      border-bottom: 1px solid #d1d7e2;
                      height: 40px;
                      align-items: center;
                    ">
                    <div v-for="(item, index) in fSourcefilelist" :key="index" class="imgs"
                      @click="openPdf(item.url, item.fFileName)">
                      <img src="" />
                    </div>
                  </div>
                </template>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <!-- </div> -->
        <!-- <div v-if="activeIndex == 2" class="dialogBody common" :style="{ height: dialogHeight }"></div> -->
      </el-dialog>
    </div>

    <div class="Control-2">
      <el-dialog :title="fFileName" v-dialogDrag :visible.sync="dialogPdf">
        <div :style="{ height: dialogHeights }">
          <iframe :src="pdfUrl" width="100%" height="100%" frameborder="0"></iframe>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import tree from "@/components/public/common-trees";

import {
  getConcreteChecksampleEasyTestList, // 混凝土回弹业务监管-2-列表页
  getConcreteChecksampleEasyTestListByProject, // 混凝土回弹业务监管-根据标段工程标识查询列表页
  getUserCompanyTreeList,
  getConcreteChecksampleEasyTestByFid, // 混凝土回弹业务监管-2-详情接口
} from "@/api/request.js";
export default {
  name: "Home",
  inject: ["reload"],
  data() {
    return {
      names: "Control-2",
      yj_view: null,
      getList: {
        modelType: "2", // 0代办 1已办  2查询页面
        companyId: "", //机构id
        userId: "", //当前登录用户id
      },
      checked: false, //查看下级
      name: "未选择公司",
      dialogHeight: "",
      dialogHeights: "",
      fFileName: "",
      activeIndex: "1",
      tableWidth: "54",
      tableWidth1: "82",
      expandedKeys: null,
      fId: null, //当前数据fId
      projectName: null, //项目名称
      loading: false,
      CheckList: [], //检测记录
      tableData5: [],
      fPhotofilelist: [], //检测记录表文件集合
      fSourcefilelist: [], //强度检测报告文件集合

      dialogTableVisible: false,
      dialogTableVisibled: false,
      dialogPdf: false,
      pdfUrl: "",

      loadingDialog1: false,
      dialogCheckVisible: false,
      loadingCheckDialog: false,
      dialogFormVisible: false,
      formData: {
        // name: "桥梁工程|K0+882张槐互通桥左幅|左幅1-1#墩圆柱式墩砼浇筑",
        // region: "",
        // date1: "",
        // date2: "",
        // delivery: false,
        // type: [],
        // resource: "",
        // desc: ""
      },
      formLabelWidth: "80px",
      treeData: [],

      tableDatas: [],
      tableData: [],
      // 左侧机构树
      defaultProps: {
        children: "children",
        label: "fShortname",
      },
      dialogVisible: false,
      companyId: null,
      loadingDialog: false,
      treelength: false,
      highlightBd: true, //左侧机构树停留背景色
      treeText: {
        companyId: null,
        userId: null,
      },
      checkData: [], //选中tree状态id
    };
  },
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem("GxBack-userInfo"));
    this.getList.userId = this.userInfo.userId;
    if (JSON.parse(sessionStorage.getItem("GxBack-engineerList"))) {
      var id = JSON.parse(sessionStorage.getItem("GxBack-engineerList"));
      this.checkData = [id.fCompanyid];
    }
    this.getHeight();
    this.getTree();
    this.btnRole(this.names);
  },
  components: {
    tree,
  },
  methods: {
    btnRole(name) {
      var btnList = [];
      var ModuleList = JSON.parse(sessionStorage.getItem("GxBack-ModuleList"));
      if (ModuleList.length > 0) {
        ModuleList.map((item) => {
          if (item.fEncode == name) {
            btnList = item.modulebuttonList;
          }
        });
        var btnStr = [];
        btnList.map((item) => {
          console.log(item);
          btnStr.push(item.fEncode);
        });
        this.yj_view = btnStr.includes("yj_view");
      } else {
        this.yj_view = true;
      }
    },
    // 点击当前行变色
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    openPdf(url, name) {
      this.dialogPdf = true;
      this.pdfUrl = url;
      this.fFileName = name;
    },
    tableRowClassName({ row }) {
      if (row.level == 0 && !row.children) {
        return "fristColor";
      }
    },
    openPdfs1(v) {
      this.dialogPdf = true;
      this.pdfUrl = v.url;
      this.fFileName = v.fFileName;
    },
    handleSelect(key) {
      this.activeIndex = key;
    },
    // 左侧树结构
    getTree() {
      this.treeText.companyId = this.userInfo.companyId;
      this.treeText.userId = this.userInfo.userId;
      getUserCompanyTreeList(this.treeText)
        .then((res) => {
          if (res.errcode == 0) {
            var companyTree = res.data.userCompanyTreeList;
            this.treeData = this.commonJs.tranListToTreeData(companyTree);

            if (this.treeData[0].children == undefined) {
              this.treelength = false;
            } else {
              this.treelength = true;
            }
            if (this.checkData[0]) {
              this.name = JSON.parse(
                sessionStorage.getItem("GxBack-engineerList")
              ).fShortname;
              this.companyId = this.checkData[0];
              this.getList.companyId = this.checkData[0];
            } else {
              this.name = this.treeData[0].fShortname; //当前点击组织机构名称
              this.getList.companyId = this.treeData[0].fCompanyid; //当前点击组织机构ID
              this.companyId = this.treeData[0].fCompanyid;
              this.checkData[0] = this.treeData[0].fCompanyid;

            }

            this.getDataList(this.getList);
            // 列表
          } else {
            this.$message.error("获取组织机构失败", res.msg);
            return false;
          }
        })
        .catch(() => {
          return false;
        });
    },

    tranListToTreeData1(data) {
      let result = [];
      if (!Array.isArray(data)) {
        return result;
      }
      // 清除已存在的children 重新赋值
      data.forEach((item) => {
        delete item.children;
      });

      let map = {};
      data.forEach((item) => {
        map[item.F_CompanyId] = item;
      });

      data.forEach((item) => {
        let parent = map[item.F_ParentId];
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          result.push(item);
        }
      });

      return result;
    },
    // 获取列表数据
    getDataList(data) {
      this.loading = true;
      // 混凝土回弹业务监管-2-列表页
      getConcreteChecksampleEasyTestList(data)
        .then((res) => {
          this.companyTree = res.data.checkConcretesampleEasyTestList;
          if (res.errcode == 0) {
            var that = this;
            setTimeout(() => {
              that.loading = false;
              that.tableData = that.tranListToTreeData1(that.companyTree);
              that.$nextTick(() => {
                that.$refs.multipleTable.doLayout();
              });
            }, 200);
          } else {
            this.$message.error("列表数据获取失败", res.msg);
            this.loading = false;
          }
        })
        .catch(() => {
          console.log("列表数据获取失败");
          this.loading = false;
        });
    },

    // 点击当前行
    getRowInfo(e) {
      console.log(e);
      if (e.isHave > 0 && e.F_Note != "") {
        this.fId = e.F_EnCode;
      } else {
        this.fId = null;
      }
    },

    // 获取页面容器高度
    getHeight() {
      var h = document.documentElement.clientHeight; //获取页面可见高度

      this.dialogHeight = h * 0.3 + "px";
      this.dialogHeights = h * 0.85 + "px";
    },
    handleNodeClick(data) {
      console.log(data);
      this.getList.companyId = data.fCompanyid;
      this.name = data.fShortname;
      this.getDataList(this.getList);
    },
    handleClick(row, num) {
      this.fId = row.F_Id;

      this.printFile(num);
    },
    openDialog1(row) {
      this.fId = row.F_EnCode;
      this.dialogCheckVisible = true;
      this.getCheckList(row.F_EnCode);
    },
    // 获取检测记录
    async getCheckList(id) {
      if (this.fId != null) {
        this.dialogCheckVisible = true;
        this.loadingCheckDialog = true;
        getConcreteChecksampleEasyTestListByProject({ enCode: id })
          .then((res) => {
            if (res.errcode == 0) {
              this.CheckList = res.data.checkConcretesampleEasyTestList;
              this.loadingCheckDialog = false;
            } else {
              this.$message.error("获取检测记录失败", res.msg);
              this.loadingCheckDialog = false;
            }
          })
          .catch(() => {
            console.log("获取检测记录失败");
            this.loadingCheckDialog = false;
          });
      } else {
        return this.$message.error("当前数据不可查看");
      }
    },
    openDialog(row) {
      this.getDetails(row.fId);
      this.dialogTableVisibled = true;
    },
    getDetails(id) {
      this.loadingDialog1 = true;
      getConcreteChecksampleEasyTestByFid({ fId: id })
        .then((res) => {
          if (res.errcode == 0) {
            this.loadingDialog1 = false;
            this.formData = res.data.lrCheckConcreteeasytest;
            this.fPhotofilelist = res.data.fPhotofilelist; //检测记录表文件集合
            this.fSourcefilelist = res.data.fSourcefilelist; //强度检测报告文件集合
          } else {
            this.$message.error("检测情况概述", res.msg);
            this.loadingDialog1 = false;
          }
        })
        .catch(() => {
          console.log("检测情况概述");
          this.loadingDialog1 = false;
        });
    },
  },
};
</script>
<style scoped>
.dialogBody {
  padding: 0 5px;
  height: 80%;
  overflow-y: auto;
}

.imgs {
  display: flex;
}

.imgs img {
  width: 20px;
  height: 20px;
  margin: 0 4px;
}

.pageFlagText {
  color: #171a1d;
  font-size: 16px;
}

a {
  text-decoration: none;
  color: #000;
}
</style>